<template>
    <div class="editrecommendation">
        <h3>编辑推荐</h3>
        <div class="wapper" ref="wapper">
            <ul class="content" ref="content">
                <li v-for="item in songListData.slice(0,6)" :key="item.id" @click="selectPlayListDetail(item)">
                    <div class="cover">
                        <img :src="item.picUrl" alt="">
                        <span>{{(item.playCount/1000)| numFilter(0)}}万</span>
                    </div>
                    <span>{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'

    export default {
        data(){
            return{
               songListData:[] 
            }
        },
        mounted(){
            this.getSongList()
        },
        methods:{
            getSongList(){
                axios.get("/api/personalized")
                .then(res => {
                    console.log(res.data.result)
                    this.songListData=res.data.result
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            selectPlayListDetail(item){
                const id = item.id
                this.$router.push({
                    name:'PlayListDetail',
                    params:{id}
                })
            },
            filters:{
                numFilter(value,num){
                    return parseFloat(value).toFixed(num)
                }
            },  
        }
    }
</script>
<style scoped>
    .editrecommendation{
        width: 90%;
        margin: 0 auto;
    }
    .editrecommendation>h3{
        text-align: left;
        
    }
    .wapper{
        overflow: hidden;
    }
    ul.content>li{
        display: inline-block;
        width: 33%;
        vertical-align: top;
        margin-left: 0px;
        margin-right: 0px;
    }
    ul.content>li img{
        width: 90%;
        
    }

    ul.content>li>span{
        font-size: 12px;
        display: inline-block;
        width: 90%;
    }
    .cover{
        position: relative;
    }
    .cover>span{
        color: aliceblue;
        position: absolute;
        right: 12px;
        top: 5px;
        font-size: 14px;
    }
</style>